<template>
  <div class="login">
    <div class="animate__backInUp cms-box">
      <div class="title">后台管理系统</div>
      <LoginFrom ref="loginFromRef" />
      <div class="controls">
        <div class="left">
          <el-checkbox v-model="isChecked" label="记住密码" size="large" />
        </div>
        <div class="right">忘记密码</div>
      </div>
      <div class="login-btn">
        <el-button type="primary" size="large" @click="LoginFn">立即登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import LoginFrom from './c-cpns/login-from.vue';
import Storage from '@/utils/Storeage';
import { IS_CHECKED } from '@/global/constants';

const isChecked = ref<boolean>(Storage.get(IS_CHECKED) ?? false);
const loginFromRef = ref<InstanceType<typeof LoginFrom>>();

const LoginFn = () => {
  // console.log(activeName.value);
  loginFromRef?.value?.fromSubmitFn();
};

watch(isChecked, (newValue) => {
  Storage.set(IS_CHECKED, newValue);
});
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/background.8bb1ed75.jpg') center no-repeat;
  background-size: cover;

  .cms-box {
    position: relative;
    left: 52%;
    top: 30%;
    width: 23.75rem;

    .title {
      font-size: 26px;
      text-align: center;
      font-weight: 600;
      margin-bottom: 15px;
    }

    .controls {
      display: flex;
      margin-top: 5px;
      justify-content: space-between;

      .right {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #51a7ff;
      }
    }

    .login-btn {
      margin-top: 8px;
    }

    .el-button--primary {
      width: 100%;
      font-size: 16px;
      height: 45px;
    }
  }
}
</style>
